<template>
  <el-row>
    <el-col :span="24">
      <el-select v-model="search_name" :remote-method="uuidChange" filterable placeholder="请搜索地址添加" remote
                 value-key="id" @change="handleCheckUuid" class="full-width">
        <el-option v-for="item in uuid_list" :key="item.id" :label="item.uuid" :value="item">
          <span>{{ item.uuid }}/{{ item.remark }}</span>
        </el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="address-box">
        <div class="address-box-title">
          <span>选中设备，点击即可删除</span>
          <el-button plain size="mini" type="danger" @click="delAll">全部清空</el-button>
        </div>
        <div class="choose-address">
          <div v-for="(item, index) in new_uuid" :key="index" class="choose-address-info">
            <el-button icon="el-icon-delete" size="mini" type="success" @click="delUuid(index)">
              <span>{{ item.uuid }}/{{ item.remark }}</span>
            </el-button>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>

</template>

<script>
import API from '@/api/index.js'

export default {
  data() {
    return {
      search_name: '',
      uuid_list: [],
      c_direction_val: this.direction_val,
      addresses: this.parent_addresses,
      new_uuid: [],
      uuidData: this.parent_uuid,
    }
  },
  props: ['direction_val', 'parent_addresses', 'parent_uuid'],
  watch: {
    direction_val(val) {
      this.c_direction_val = val;
      this.uuidChange();
    },
    parent_addresses(val) {
      this.addresses = val;
    },
    parent_uuid(val) {
      this.uuidData = val;
    }
  },
  mounted() {
    this.uuidChange();
  },
  methods: {
    // 加载更多数据
    uuidChange(val) {
      let self = this;
      self.search_name = val;
      API.getDeviceUuid(self.search_name, self.c_direction_val, self.addresses).then(res => {
        let data = res.data.data;
        self.$notify({
          message: '搜索成功'
        });
        self.uuid_list = [];
        data.map(item => {
          self.uuid_list.push({
            id: item.id,
            uuid: item.uuid,
            remark: item.remark
          })
        })
        console.log(self.uuid_list)
        return self.uuid_list;
      }).catch(err => {
        self.$message.error(err.response.data.message)
      });
    },
    // 选中的地址
    handleCheckUuid(val) {
      let self = this;
      let copy_new_uuid = [];
      copy_new_uuid.push(val);
      for (let i = 0; i < copy_new_uuid.length; i++) {
        if (!self.new_uuid.includes(copy_new_uuid[i])) { //includes 检测数组是否有某个值
          self.new_uuid.push(copy_new_uuid[i]);
          self.uuidData.push(copy_new_uuid[i].id);
        } else {
          self.$notify.error({
            message: '已选中该UUID,请勿重复选择'
          });
        }
      }
      this.emitUuidData();
    },
    // 删除UUID
    delUuid(val) {
      let self = this;
      self.new_uuid.splice(val, 1);
      self.uuidData.splice(val, 1);
      self.$emit('getAddresses', {
        addresses: self.addresses
      })
    },
    // 全部清空
    delAll() {
      let self = this;
      self.uuidData = [];
      self.new_uuid = [];
      this.emitUuidData();
    },

    emitUuidData() {
      let self = this;
      self.$emit('getUuidData', {
        uuidData: self.uuidData
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.address-box {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  // padding: 10px;
  border: 1px #ccc solid;
  border-radius: 10px;

  .address-box-title {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 14px;

    span {
      margin-right: 10px;
    }
  }

  .choose-address {
    display: flex;
    flex-wrap: wrap;

    .choose-address-info {
      margin: 6px;
    }
  }
}
</style>


<!--<template>-->
<!--	<div>-->
<!--		<el-transfer v-loading="uuid_loading" element-loading-text="正在请求设备UUID数据,请稍后"-->
<!--			element-loading-spinner="el-icon-loading" filterable v-model="uuid" :data="uuid_list"-->
<!--			:titles="['uuid-地址', '选中地址']" :button-texts="['取消', '确定']" @change="handleCheckAllUUID" style="width: 100%;">-->
<!--			<template #default="{option}">-->
<!--				{{ option.key }} - {{ option.label }}-->
<!--			</template>-->
<!--			<template #left-footer>-->
<!--				<div v-if="loading_more" class="more">-->
<!--					加载<el-input v-model="limit" size="mini" style="width:100px;" placeholder="条数"></el-input>条-->
<!--					<el-button @click="limitChange" size="mini">请求</el-button>-->
<!--				</div>-->
<!--				<div v-else class="no-more">暂无更多数据</div>-->
<!--			</template>-->
<!--		</el-transfer>-->
<!--	</div>-->
<!--</template>-->

<!--<script>-->
<!--	import API from '@/api/index.js'-->

<!--	export default {-->
<!--		data() {-->
<!--			return {-->
<!--				uuid_loading: false, // 请求uuid数据加载-->
<!--				addresses: this.parent_addresses,-->
<!--				uuid: this.parent_uuid,-->
<!--				uuid_list: [],-->
<!--				copy_uuid_list: [],-->
<!--				c_direction_val: this.direction_val,-->
<!--				loading_more: true,-->
<!--				page: 1,-->
<!--				limit: '10',-->
<!--			}-->
<!--		},-->
<!--		props: ['direction_val', 'parent_addresses', 'parent_uuid'],-->
<!--		watch: {-->
<!--			direction_val(val) {-->
<!--				this.c_direction_val = val;-->
<!--				this.getUuid();-->
<!--				this.loading_more = true;-->
<!--				this.page = 1;-->
<!--				this.limit = "10";-->
<!--			},-->
<!--			parent_addresses(val) {-->
<!--				this.addresses = val;-->
<!--			},-->
<!--			parent_uuid(val) {-->
<!--				this.uuid = val;-->
<!--			}-->
<!--		},-->
<!--		mounted() {-->
<!--			this.getUuid();-->
<!--		},-->
<!--		methods: {-->
<!--			getUuid() {-->
<!--				let self = this;-->
<!--				self.uuid_list = [];-->
<!--				self.copy_uuid_list = [];-->
<!--				self.uuid_loading = true;-->
<!--				API.devices(1, 10, 0, '', '', self.c_direction_val, '', 0, self.addresses, 0).then(res => {-->
<!--					let data = res.data.data.data;-->
<!--					self.uuid_loading = false;-->
<!--					self.$notify({-->
<!--						message: '获取uuid接口成功'-->
<!--					});-->
<!--					self.page = self.page + 1;-->
<!--					self.copy_uuid_list = data;-->
<!--					self.copy_uuid_list.forEach(item => {-->
<!--						self.uuid_list.push({-->
<!--							key: item.id,-->
<!--							label: item.uuid + ' - ' + item.remark-->
<!--						});-->
<!--					})-->
<!--					return self.uuid_list;-->
<!--				}).catch(err => {-->
<!--					self.uuid_loading = false;-->
<!--					self.$message.error(err.response.data.message)-->
<!--				})-->
<!--			},-->
<!--			// 加载更多数据-->
<!--			limitChange() {-->
<!--				let self = this;-->
<!--				self.uuid_loading = true;-->
<!--				API.devices(self.page, self.limit, 0, 0, '', '', self.c_direction_val, '', 0, self.addresses).then(res => {-->
<!--					self.uuid_loading = false;-->
<!--					let data = res.data.data;-->
<!--					self.$notify({-->
<!--						message: '获取uuid接口成功'-->
<!--					});-->
<!--					if (data.data.length > 0) {-->
<!--						self.copy_uuid_list = [];-->
<!--						self.copy_uuid_list = data;-->
<!--						self.copy_uuid_list.forEach(item => {-->
<!--							self.uuid_list.push({-->
<!--								key: item.id,-->
<!--								label: item.uuid + item.remark-->
<!--							});-->
<!--						});-->
<!--						self.page = self.page + 1;-->
<!--						return self.uuid_list;-->
<!--					} else {-->
<!--						self.loading_more = false;-->
<!--					}-->
<!--				}).catch(err => {-->
<!--					self.uuid_loading = false;-->
<!--					self.$message.error(err.response.data.message)-->
<!--				});-->
<!--			},-->
<!--			// 选中的地址-->
<!--			handleCheckAllUUID(val) {-->
<!--				let self = this;-->
<!--				console.log(val)-->
<!--				self.$emit('getUUID', {-->
<!--					uuid_list: val-->
<!--				})-->
<!--			},-->
<!--		}-->
<!--	}-->
<!--</script>-->

<!--<style>-->
<!--</style>-->
